<div class="row title-bar">
    <div class="col-xs-8">
        <button class="btn btn-success" (click)="addNew(addModal)">
          <i class="glyphicon glyphicon-plus-sign"></i> 添加</button>
    </div>

    <div class="col-xs-4 search-bar">
        <input type="text" class="form-control search" [(ngModel)]="searchCode" name="searchCode" placeholder="请输入课程名称" style="width: 40%;">
        <button class="btn btn-info" (click)="search()">
            <i class="glyphicon glyphicon-search"></i> 搜索</button>
        <button class="btn btn-info" (click)="clear()" style="margin-left: 5px">
            <i class="glyphicon glyphicon-remove"></i> 清空</button>
    </div>
</div>

<table class="table table-striped mt20">
  <thead>  
    <tr>
        <th>ID</th>
        <th>课程名称</th>
        <th>课程信息</th>
        <th>操作</th>
    </tr>
  </thead>
  <tbody *ngIf="array.length!==0">
    <tr *ngFor="let data of array">
        <td>{{data.id || '--'}}</td>
        <td>{{data.name || '--'}}</td>
        <td>{{data.content || '--'}}</td>

      <td>
        <button type="button" title="删除" class="btn btn-default glyphicon glyphicon-trash" (click)="delete(data, deleteModal)"></button>
        <button type="button" title="编辑" class="btn btn-default glyphicon glyphicon-pencil" (click)="edit(data, addModal)"></button>
      </td>  
    </tr>  
  </tbody>
</table>
<p *ngIf="array.length ===0" class="txt-center">暂无数据</p>

<!-- 分页 -->
<div *ngIf="array.length !== 0" class="row">
  <div class="col-xs-12 col-12">
    <pagination [totalItems]="bigTotalItems" [(ngModel)]="bigCurrentPage" [maxSize]="maxSize" class="pagination-sm" [boundaryLinks]="true" [rotate]="false" (numPages)="numPages = $event"
     (pageChanged)="pageChanged($event)"></pagination>
  </div>
</div>
 
<!-- add | edit -->
<div id='add' name='add' class="modal fade" bsModal #addModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title darkGreen">
            <span *ngIf="addOrEdit === 'add'">添加课程信息</span>
            <span *ngIf="addOrEdit === 'edit'">编辑课程信息</span>
        </h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <!-- form-box -->
        <form novalidate class="form-horizontal">

            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>课程名称：</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" [(ngModel)]="name" name="name" placeholder="请输入课程名称" required (ngModelChange)='ngChangedFn()'>
              </div>
            </div>

            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>课程信息：</label>
              <div class="col-sm-9">
                <textarea class="form-control" rows="3" [(ngModel)]="content" name="content" required (ngModelChange)='ngChangedFn()'></textarea>
              </div>
            </div>
            <div class="form-group" *ngIf='isEmpty === true' style="text-align: center; ">
              <div class="col-lg-12 col-md-12 col-sm-12 required">
                  <i class="glyphicon glyphicon-info-sign"></i>必填字段不可为空
              </div>
            </div>
            <div class="form-group" style="text-align: center; ">
              <div class="col-lg-12 col-md-12 col-sm-12">

                <button type="submit" class="btn btn-success"
                    (click)="onSubmit(id, name, content, addModal)">
                   确定
                </button>
                <button type="button" class="btn btn-info" (click)="addModal.hide()">取消</button>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

<!--delete -->
<div id='delete' name='delete' class="modal fade deleteModal" bsModal #deleteModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left darkGreen">删除</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body txt-center">
        <p style="margin-bottom: 20px;">是否删除此数据</p>

          <button type="submit" class="btn btn-success" (click)="deleteConfirm(data,deleteModal)">确认</button> 
          <button type="submit" class="btn btn-info" (click)="deleteModal.hide()">取消</button>
      </div>

    </div>
  </div>
</div>
